<template>
  <div class="Latestmusic">
    <div class="main">
      <div class="div1" :class="show==1?'p':''" @click="getSongexpress">
        <span>新歌速递</span>
      </div>
      <div class="div2" :class="show==2?'p':''" @click="getDisconshelves">
        <span>新碟上架</span>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
import Songexpress from '@/components/Home/Latestmusic/Songexpress.vue'
import Disconshelves from '@/components/Home/Latestmusic/Disconshelves.vue'
export default {
  name: 'Latestmusic',
  data() {
    return {
      show: 1
    }
  },
  components: {
    Songexpress,
    Disconshelves
  },
  mounted() {
    this.$router.push({ path: '/home/Latestmusic/Songexpress' })
  },
  methods: {
    getSongexpress() {
      this.show = 1
      this.$router.push({ path: '/home/Latestmusic/Songexpress' })
    },
    getDisconshelves() {
      this.show = 2
      this.$router.push({ path: '/home/Latestmusic/Disconshelves' })
    }
  }
}
</script>

<style lang="less" scoped>
.Latestmusic {
  margin-top: 100px;
  .main {
    display: flex;
    border: 1px solid #dcdbdb;
    width: 250px;
    border-radius: 25px;
    margin-left: 400px;
    .div1 {
      font-size: 12px;
      width: 50%;
      border-radius: 25px;
      span {
        margin: 7px auto;
      }
    }
    .div2 {
      font-size: 12px;

      width: 50%;
      border-radius: 25px;
      span {
        margin: 7px 0;
        display: flex;
        justify-content: center;
      }
    }
    .div1:hover {
      cursor: pointer;
    }
    .div2:hover {
      cursor: pointer;
    }
    .p {
      background-color: rgb(193, 198, 196);
      color: #fff;
    }
  }
}
</style>